<template>
  <view class="member-card" :class="info.member_status_int && info.member_status_int == 1 ? 'member-active' :''">
    <view class="m-title">{{info.title}}</view>
    <view class="m-con">
      <view>{{info.end_time}}到期</view>
      <view class="m-count">{{info.title.includes('会员')? '今日' : ''}}剩余<text class="m-strong">{{info.look_num}}</text>次</view>
    </view>
    <view class="m-desc">1、有效期{{info.day}}天</view>
    <view class="m-desc">2、{{info.smalltext}}</view>
    <view class="m-desc">3、{{info.ftitle}}</view>
    <view class="m-active">{{info.member_status_int && info.member_status_int == 1 ? '生效中' : '已失效'}}</view>
  </view>
</template>

<script setup>
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<style lang=scss scoped>
.member-card {
  padding: 30rpx;
  border-radius: 30rpx;
  position: relative;
  margin-top: 20rpx;
  background: #fff;
}
.m-title {
  font-weight: bold;
  font-size: 32rpx;
  color: #000;
  padding-bottom: 20rpx;
}
.m-con {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: 60rpx;
  font-weight: 500;
  font-size: 24rpx;
  color: #666;
}
.m-active {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
  font-weight: bold;
  font-size: 24rpx;
  color: #ffffff;
  background: linear-gradient(90deg, #cccccc 0%, #aaaaaa 100%);
  border-radius: 0rpx 30rpx 0rpx 30rpx;
}
.m-desc {
  font-weight: 500;
  font-size: 24rpx;
  color: #666;
}

.m-count {
  font-weight: 500;
  font-size: 24rpx;
  color: #000;
}
.m-strong {
  font-weight: 600;
  font-size: 48rpx;
  color: #000;
}

.member-active {
  background: linear-gradient(180deg, #ffd8d6 0%, #ffffff 37%);
  .m-active {
    background: linear-gradient(90deg, #ff602b 0%, #ff2b2b 100%);
  }
}
</style>